<template>
	<div style="margin-top: 20px;overflow-y:scroll;overflow-x:hidden;height:100%">
		<el-form ref="form" :model="form" label-width="80px" style="margin-bottom: 50px;">
			<el-form-item label="头像">
				<el-upload class="avatar-uploader" action="http://localhost:8888//images/uploadtouxiang"
					:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
					<img v-if="uploadImageUrl" :src="require('@/assets/touxiang/'+this.uploadImageUrl)"
						v-model="form.imageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			<el-form-item label="用户名">
				<el-input v-model="form.name" style="width: 200px;"></el-input>
			</el-form-item>
			<el-form-item label="性别">
				<el-radio-group v-model="form.sex">
					<el-radio label="男"></el-radio>
					<el-radio label="女"></el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="手机号码">
				<el-input v-model="form.phonenumber" style="width: 200px;"></el-input>
			</el-form-item>
			<el-form-item label="出生日期">
				<el-col>
					<el-date-picker type="date" placeholder="选择日期" v-model="form.date" value-format="yyyy-MM-dd"
						style="width: 200px;"></el-date-picker>
				</el-col>
			</el-form-item>
			<el-form-item label="地址">
				<el-input v-model="form.address" style="width: 200px;"></el-input>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="onSubmit">保存信息</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import request from '../../../utils/axios/request';

	export default {
		inject: ['reload'],
		data() {
			return {
				uploadImageUrl: '',
				userId: '123',
				form: {
					imageUrl: '',
					name: '',
					sex: '',
					phonenumber: '',
					date: '',
					address: ''
				}
			}
		},
		created() {
			request({
				method: 'get',
				url: '/userInfo/' + this.userId,
			}).then((res) => {
				console.log(res)
				this.uploadImageUrl = res.data.data.imageUrl,
					this.form.name = res.data.data.userName,
					this.form.sex = res.data.data.userSex,
					this.form.phonenumber = res.data.data.userPhone,
					this.form.date = res.data.data.userBirthdate,
					this.form.address = res.data.data.userLocation

			})
		},

		methods: {

			handleAvatarSuccess(res, file) {
				this.uploadImageUrl = res.data;
				console.log(this.uploadImageUrl)
			},
			beforeAvatarUpload(file) {
				// const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				// if (!isJPG) {
				// 	this.$message.error('上传头像图片只能是 JPG 格式!');
				// }
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isLt2M;
				// return isJPG && isLt2M;
			},
			onSubmit() {
				console.log('submit!');
				// console.log(this.form)

				// console.log(this.$cookies)
				request({
					method: 'put',
					url: '/userInfo/uId' + this.userId,
					data: {
						userInfoId: this.userId,
						imageUrl: this.uploadImageUrl,
						userName: this.form.name,
						userSex: this.form.sex,
						userPhone: this.form.phonenumber,
						userBirthdate: this.form.date,
						userLocation: this.form.address
					}
				}).then((res) => {
					console.log(res)
					if (res.data.code == 100) {
						this.reload()
					}
				})
			}
		}
	}
</script>

<style>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>